<!--
    可过滤长度的span
    字段说明
        value:展示的值
        v-model: 展示的值【优先级高】
        showOverflowTooltip: 为true的情况下开启过滤
        num:过滤的长度，默认为30
     使用示例：
     <va-span value='使用示例；使用示例；使用示例；使用示例；使用示例；'
              :showOverflowTooltip="true"
              :num="70"/>
-->

<template>
    <p>
        {{modelValueC}}
    </p>
</template>

<script>
    export default {
        name: "Va-span",
        props: {
            modelValue: {
                type: String,
                default: null
            },
            num: {
                type: Number,
                default: 30
            },
            showOverflowTooltip: {
                type: Boolean,
                default: false
            },
            value: {
                type: String,
                default: null
            }
        },
        computed: {
            modelValueC() {
                let value = ''
                if(this.modelValue){
                    value = this.modelValue
                }else{
                    value = this.value
                }
                if (this.showOverflowTooltip) {
                    const nums = this.num;
                    if (!value) return '';
                    if (value.length > nums) {
                        return value.slice(0, nums) + ' ···';
                    }
                }
                return value;
            }
        }
    }
</script>

<style scoped>
    p{
        margin:20px auto;
        line-height:25px;
    }
</style>